
<!-- 请帮我创建一个完整的运营位添加Vue组件，具体要求：

**组件结构：**
- 使用 `<script setup lang="ts">` 语法
- Composition API + TypeScript
- 导入必要的依赖：vue, element-plus, 自定义请求工具

**核心功能：**
1. 图片上传模块
   - 拖拽上传功能
   - 支持jpg/png格式
   - 上传成功/失败处理
   - 图片预览和删除

2. 表单输入模块
   - 运营位名称（必填）
   - 运营位描述（必填）
   - 落地页路由（必填）
   - 运营位状态（启用/禁用）

3. 表单验证和提交
   - 必填字段验证
   - 创建按钮状态控制
   - 表单数据提交
   - 成功后的表单重置

**错误处理：**
- 网络错误处理
- 权限验证（401跳转登录）
- 服务器错误处理
- 用户友好的错误提示

**UI设计要求：**
- 使用Element Plus组件：上传、输入框、单选框、按钮
- 响应式布局和美观样式
- 表单分组和标签对齐 -->

<template>
  <div class="contentContainer">
    <!-- 运营图片上传模块 -->
    <el-upload
      drag
      action="http://localhost:3000/api/v1/common/image/upload"
      method="post"
      name="file"
      list-type="picture"
      :limit="1"
      :on-success="uploadImageSuccess"
      :on-error="uploadImageError"
      :on-remove="uploadImageRemove"
      :headers="uploadHeaders"
    >
      <el-icon :size="60" style="color: gray" class="upload">
        <upload-filled />
      </el-icon>
      <div class="el-upload text">拖拽图片到此或者 <b>选择图片</b></div>
      <template #tip>
        <div class="el-upload tip">图片类型为jpg/png</div>
      </template>
    </el-upload>
    <!-- 各种表单模块 -->
    <div class="input">
      <span>运营位名称：</span>
      <el-input style="width: 200px" v-model="name" placeholder="请输入内容" />
    </div>
    <div class="input">
      <span>运营位描述：</span>
      <el-input
        style="width: 800px"
        v-model="content"
        placeholder="请输入内容"
      />
    </div>
    <div class="input">
      <span>落地页路由：</span>
      <el-input style="width: 800px" v-model="uri" placeholder="请输入内容" />
    </div>
    <div class="input">
      <span>运营位状态：</span>
      <el-radio-group v-model="status" size="large">
        <el-radio-button label="禁用" />
        <el-radio-button label="启用" />
      </el-radio-group>
    </div>
    <!-- 上传按钮 -->
    <div class="input">
      <el-button type="primary" :disabled="disableCheak" @click="create"
        >创建运营位</el-button
      >
    </div>
  </div>
</template>

<script setup lang="ts">
// 模块引入
import { ElMessage } from "element-plus";
import { ref, computed } from "vue";
import { startRequest, RequestPath } from "../base/RequestWork";
import AccountStore from "../base/AccountStore";

// 定义属性
let cover = ref(""); // 封面
let name = ref(""); // 名称
let content = ref(""); // 内容
let uri = ref(""); // 落地页
let status = ref("禁用"); // 状态

// 获取账户信息
const account = AccountStore();

// 上传组件的headers，用于图片上传时传递token
const uploadHeaders = computed(() => {
  const headers: any = {};
  if (account.token) {
    headers.token = account.token;
  }
  return headers;
});

// 计算属性，控制创建按钮的禁用状态
let disableCheak = computed(() => {
  return !(
    cover.value.length > 0 &&
    name.value.length > 0 &&
    content.value.length > 0 &&
    uri.value.length > 0
  );
});

// 上传成功的回调方法
function uploadImageSuccess(data: any) {
  console.log('图片上传成功:', data);
  ElMessage.success({
    message: "图片添加成功",
  });
  cover.value = data.url;
}

// 上传失败的回调方法
function uploadImageError(error: any) {
  console.error('图片上传失败:', error);
  ElMessage.error({
    message: "图片添加失败，请重试!",
  });
}

// 删除了上传的文件的回调方法
function uploadImageRemove() {
  cover.value = "";
}

// 创建运营位方法
function create() {
  console.log('开始创建运营位:', {
    name: name.value,
    content: content.value,
    status: status.value === "禁用" ? 0 : 1,
    uri: uri.value,
    cover: cover.value
  });

  // 检查是否已登录
  if (!account.token) {
    ElMessage.error('请先登录管理员账号');
    return;
  }

  // 发起创建运营位接口
  startRequest(RequestPath.operationalAdd, "post", {
    name: name.value,
    content: content.value,
    status: status.value === "禁用" ? 0 : 1,
    uri: uri.value,
    cover: cover.value,
  })
    .then((response: any) => {
      console.log('创建运营位成功:', response);
      if (response.msg === 'ok') {
        ElMessage.success({
          message: "创建成功，请到运营位管理页面查看",
        });
        
        // 清空表单
        name.value = "";
        content.value = "";
        uri.value = "";
        status.value = "禁用";
        cover.value = "";
      } else {
        ElMessage.error(response.error || '创建失败');
      }
    })
    .catch((error) => {
      console.error('创建运营位失败:', error);
      
      if (error.response) {
        // 服务器返回的错误
        const statusCode = error.response.status;
        const responseData = error.response.data || {};
        
        if (statusCode === 400) {
          ElMessage.error(responseData.error || '请求参数错误，请检查表单数据');
        } else if (statusCode === 401) {
          ElMessage.error('权限不足，请重新登录管理员账号');
        } else if (statusCode === 500) {
          ElMessage.error('服务器内部错误，请联系管理员');
        } else {
          ElMessage.error(responseData.error || '创建失败');
        }
      } else if (error.request) {
        // 网络错误
        ElMessage.error('网络错误：请检查后端服务是否正常运行');
      } else {
        // 其他错误
        ElMessage.error(error.message || '创建失败');
      }
    });
}
</script>

<style scoped>
.contentContainer {
  padding: 20px;
}

.input {
  margin: 20px 0;
}

.input span {
  display: inline-block;
  width: 120px;
  text-align: right;
  margin-right: 10px;
}

.el-upload.text {
  margin-top: 10px;
  color: #666;
}

.el-upload.tip {
  margin-top: 5px;
  color: #999;
  font-size: 12px;
}
</style>